<template>
  <div class="tags-view-container pl-4 flex">
    <div class="flex-1 min-w-0">
      <el-tabs
        :model-value="currentTab"
        :closable="store.tagsViewList.length > 1"
        @tab-change="handleChange"
        @tab-remove="removeTab($event)"
      >
        <template v-for="item in store.tagsViewList" :key="item.fullPath">
          <el-tab-pane :label="item.title" :name="item.fullPath"></el-tab-pane>
        </template>
      </el-tabs>
    </div>
    <el-dropdown @command="handleCommand">
      <span class="flex items-center px-3">
        <icon :size="16" name="el-icon-arrow-down" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="closeCurrent"> 关闭当前 </el-dropdown-item>
          <el-dropdown-item command="closeOther"> 关闭其他 </el-dropdown-item>
          <el-dropdown-item command="closeAll"> 关闭全部 </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { useTabsStore, getRouteParams } from "@/stores/multipleTabs";
const route = useRoute();
const router = useRouter();
const store = useTabsStore();

const currentTab = computed(() => {
  return route.fullPath;
});

const handleChange = (fullPath) => {
  const tabItem = store.tasMap[fullPath];
  router.push(getRouteParams(tabItem));
};

const removeTab = (fullPath) => {
  fullPath = fullPath ?? route.fullPath;
  store.removeTagsView(fullPath, router);
};

const handleCommand = (command) => {
  switch (command) {
    case "closeCurrent":
      removeTab();
      break;
    case "closeOther":
      store.removeOtherTab(route);
      break;
    case "closeAll":
      store.removeAllTab(router);
      break;
  }
};
</script>

<style lang="scss" scoped>
.tags-view-container {
  height: 46px;
  width: 100%;
  background-color: var(--el-bg-color);
  border-left: 1px solid #eee;
  box-sizing: border-box;   
  .items-center{
    outline: none;
  }
  :deep(.el-tabs) {
    height: 46px;
    .el-tabs {
      &__header {
        margin-bottom: 0;
      }
      &__content {
        display: none;
      }
      &__nav-next,
      &__nav-prev {
        @apply text-xl;
      }

      &__nav-wrap::after {
        height: 0;
      }
      &__item {
        height: 46px;
        font-weight: normal;
        padding: 0 20px !important;
        box-sizing: border-box;
        &.is-active {
          background-color: var(--el-color-primary-light-9);
          &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: var(--el-color-primary);
            margin-right: 6px;
            border-radius: 50%;
            vertical-align: 2px;
          }
          &::after {
            position: absolute;
            content: "";
            display: block;
            top: 0;
            height: 2px;
            left: 0;
            width: 100%;
            background-color: var(--el-color-primary);
          }
        }
        .is-icon-close {
          color: var(--el-text-color-regular);
          vertical-align: -2px;
          &:hover {
            color: var(--color-white);
            background-color: var(--el-color-danger);
          }
        }
      }
      &__active-bar {
        display: none;
      }
    }
  }
 
  .tags-view-wrapper {
    .tags-view-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      color: #495060;
      background: #fff;
      padding: 0 15px;
      font-size: 12px;
      border-right: 1px solid #f6f6f6;
      &::after {
        content: "";
        width: 0;
        height: 2px;
        position: absolute;
        left: 0;
        top: 0;
        background: #333;
        transition: all 0.3s;
      }
      .icon {
        margin-left: 10px;
        color: #c2c2c2;
        padding: 1px;
      }
      &:first-of-type {
        margin-left: 15px;
      }
      &:last-of-type {
        margin-right: 15px;
      }
      &.active {
        background: #f6f6f6;
        &::after {
          width: 100%;
        }
      }
      &:hover {
        background: #f6f6f6;
        &::after {
          width: 100%;
        }
        .icon {
          color: #fff;
          background: red;
          border-radius: 50%;
        }
      }
      // close 按钮
      .el-icon-close {
        width: 16px;
        height: 16px;
        line-height: 10px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transform-origin: 100% 50%;
        &:before {
          transform: scale(0.6);
          display: inline-block;
          vertical-align: -3px;
        }
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }
}
</style>
